<template>
  <div class="process">
    <van-tabs v-model="activeTab" 
      @change="tabChange"
      animated swipeable 
      :sticky="true"
      :offset-top="46"
    >
      <van-tab :title="item.name"
        v-for="item in tabs" 
        :key="item.id" 
      >
        <van-pull-refresh 
          v-model="downPullRefreshLoading" 
          @refresh="pullRefreshList"
        >
          <van-list class="processList normalList"
            v-model="upPullAddLoading"
            :finished="listFinished"
            finished-text="没有更多了"
            @load="loadList('add')"
            :immediate-check="false"
          >
            <van-panel 
              v-for="(item, index) in processList" 
              :key="index" 
              :title="item.loan + '-' + item.name" 
              :desc="'申请额度：' + item.price + '万元'" 
              :status="
                item.state == 0 ? 
                  '办理中':
                  (item.state == 1 ? 
                    '办理成功':
                    (item.state == 2 ?
                      '办理失败':
                      '其他')
                  )
              "
            >
              <div class="detail">
                <div v-text="'申请日期: ' + item.createTime"></div>
                <div v-text="'申请利率: ' + item.rate + '%'"></div>
                <div v-text="'申请年限: ' + item.year + '年'"></div>
              </div>
            </van-panel>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import { Tab, Tabs, List, Panel, PullRefresh } from 'vant';

  export default {
    name: 'process',
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [List.name]: List,
      [Panel.name]: Panel,
      [PullRefresh.name]: PullRefresh,
    },
    data () {
      return {
        activeTab: 0,
        tabs: [
          {id: 'all', name: '全部'},
          {id: 'processing', name: '办理中'},
          {id: 'done', name: '已结束'},
        ],
        processList: [],
        downPullRefreshLoading: false,
        upPullAddLoading: false,
        listFinished: false,
        pageSize: 10,
        currentPage: 0
      }
    },
    computed: {
    },
    created () {
      this.loadList();
    },
    methods: {
      pullRefreshList () {
        this.loadList();
      },
      loadList (val) {
        this.upPullAddLoading = true;
        if(val && val == 'add'){
          this.currentPage++;
        }else{
					this.listFinished = false;
          this.currentPage = 1;
          this.processList = [];
        }
        let reqParams = {
          status: this.activeTab,
				  pageSize: this.pageSize,
				  requestPage: this.currentPage
        };
        this.$api.info.getProcessList( reqParams, (res) => {
          this.upPullAddLoading = false;
          this.downPullRefreshLoading = false;
          if (this.pageSize >= res.data.length) {
            this.processList = this.processList.concat(res.data);
          }else{
            console.log('服务器返回数据超过每页显示数量：' + this.pageSize + '条');
          }
          if(this.pageSize > res.data.length) this.listFinished = true;
          else this.listFinished = false;
        });
      },
      tabChange (name, title) {
        this.loadList()
      }
    }
  }
</script>

<style lang="scss">
  .process {
  }
</style>
